<template>
  <view class="box" style="padding-bottom: 20rpx;">
    <template>
      <button @click="uploade" class="insert">点击插入图片</button>
      <view style="background-color: #fff;">
        <view class="pic">
         <image :src="sellList.pic" mode="aspectFit" class="image"></image>
        </view>
        <view class="to_things">
          <view class="name">
           以物名：<input type="text" placeholder="请输入以物(您拥有的物品)名称" v-model="sellList.name" maxlength="30" style="font-size: 32rpx; width: 78.2%; height: 34rpx; background-color: #f1f1f1;padding-left: 20rpx;">
          </view>
          <view class="description">
            以物描述：<textarea name="" id="" cols="30" rows="7" placeholder="请输入以物描述" :show-confirm-bar=hide v-model="sellList.description" style="color: #909090; width: 75%; background-color: #f1f1f1;padding-left: 20rpx;"></textarea>
          </view>
        </view>
        <view class="swap_things">
          <view class="name">
            易物名：<input type="text" placeholder="请输入易物(您想要的物品)名称" v-model="sellList.manner" maxlength="30" style="font-size: 32rpx; width: 75%; height: 34rpx; background-color: #f1f1f1;padding-left: 20rpx; width: 78.2%;">
          </view>
          <view class="description">
           易物描述：<textarea name="" id="" cols="50" rows="7" placeholder="请输入易物描述" :show-confirm-bar=hide v-model="sellList.swap_description" style="color: #909090; width: 75%; background-color: #f1f1f1;padding-left: 20rpx;"></textarea>
          </view>
        </view>
        <view class="exchange_place">
          交易地点：<input type="text" placeholder="期望交易地点" v-model="sellList.place" maxlength="17" style="font-size: 32rpx; width: 75%; height: 34rpx; background-color: #f1f1f1;padding-left: 20rpx;">
        </view>
        <view class="summit">
          <button form-type="submit" class="changeButton" :style="changeButton" @click="postSellList()" @touchstart="startChange" @touchend="endChange">修改</button>
          <button class="deleteButton" :style="deleteButton" @click="open" @touchstart="startDelete" @touchend="endDelete">删除</button>
          <uni-popup ref="popup" type="dialog">
          	<uni-popup-dialog mode="base" title="您确定要删除吗？" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
          </uni-popup>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        sellList: {
          name: '',
          description: '',
          manner: '',
          place: '',
          swap_description: '',
          pic: '',
          user_openid: '',
          state: 'show',
          support_num: [],
          support_array: []
        },
        pic: '',
        message_id: '',
        hide: false,
        changeButton: '',
        deleteButton: '',
        state: 0
      }
    },
    onLoad(options) {
      this.message_id = options._id
      this.getMessage(this.message_id)
    },
    onShow() {
      this.sellList.pic = uni.getStorageSync('jiayi_exchange')
    },
    methods: {
      startChange() {
        this.changeButton = 'background: rgba(11, 219, 11, .8);'
      },
      endChange() {
        this.changeButton = 'background: rgba(11, 219, 11, 1);'
      },
      startDelete() {
        this.deleteButton = 'background: rgba(249, 51, 51, .8);'
      },
      endDelete() {
        this.deleteButton = 'background: rgba(249, 51, 51, 1);'
      },
      getCode() {
      	return new Promise((resolve, reject) => {
      		uni.login({
      			provider: "weixin",
      			success: (e) => {
      				resolve(e)
      			},
      			fail: (err) => {
      				reject(new Error("获取code失败"))
      			}
      		})
      	})
      },
      getOpenID(code) {
      	return uniCloud.callFunction({
      		name: "wxLogin",
      		data: {
      			code
      		}
      	})
      },
      // 获取商品信息
      getMessage(id) {
        uniCloud.callFunction({
          name: 'get',
          data: {_id: this.message_id},
          success: (res) => {
            const data = res.result.data[0]
            this.sellList.name = data.name
            this.sellList.description = data.description
            this.sellList.manner = data.manner
            this.sellList.swap_description = data.description
            this.sellList.place = data.place
            this.sellList.pic = data.pic
            this.pic = data.pic
            this.sellList.support_num = data.support_num
            this.sellList.support_array = data.support_array
          }
        })
      },
      // 提交修改后的数据
       postSellList() {
         if(this.state == 0) {
           this.state = 1
           if(this.sellList.name.replace(/ |\n/g,"") !== '' && this.sellList.manner.replace(/ |\n/g,"") !== '' && this.sellList.place.replace(/ |\n/g,"") !== '' && this.sellList.description.replace(/ |\n/g,"") !== '') {
             this.getCode().then(e => {
               return this.getOpenID(e.code)
             }).then(async e => {
               this.sellList.user_openid = e.result.openid
               const db = uniCloud.database()
               const collection = db.collection('jiayi-message')
               let res = await collection.doc(this.message_id).update(this.sellList)
             }).then(e => {
                 uni.navigateBack()
                 this.state = 0
               })
           } else {
             if(this.sellList.name.replace(/ |\n/g,"") == '') {
              uni.showToast({
                 title: '以物名为空',
                	icon: "error",
                	duration: 1000
              })
              this.state = 0
             } else if(this.sellList.manner.replace(/ |\n/g,"") == '') {
                    uni.showToast({
                       title: '易物名为空',
                      	icon: "error",
                      	duration: 1000
                        })
                        this.state = 0
                } else if(this.sellList.place.replace(/ |\n/g,"") == '') {
                   uni.showToast({
                      title: '交易地点为空',
                     	icon: "error",
                     	duration: 1000
                      })
                      this.state = 0
                } else {
                   uni.showToast({
                      title: '以物描述为空',
                     	icon: "error",
                     	duration: 1000
                      })
                      this.state = 0
                }
           }
         }
       },
       // 用户删除数据 实际上为隐藏数据
       open() {
       	this.$refs.popup.open()
       },
       close() {
       	this.$refs.popup.close()
       },
       confirm(value) {
         this.getCode().then(e => {
           return this.getOpenID(e.code)
         }).then(async e => {
           this.sellList.user_openid = e.result.openid
           const db = uniCloud.database()
           const collection = db.collection('jiayi-message')
           let res = await collection.doc(this.message_id).update({state: "hidden"})
         }).then(e => {
             uni.navigateBack()
           })
         this.$refs.popup.close()
       },
       // 图片上传
        uploade() {
         uni.chooseImage({
         	count: 1,
         	  success:(res) => {
         		if (res.tempFilePaths.length > 0) {
         			let filePath = res.tempFilePaths[0]
         			uni.navigateTo({
         			  url: '/subpkg/crop/crop?filePath=' + filePath + '&where=sell'
         			})
         		}
         	},
          fail:(res) => {
            this.sellList.pic = this.pic
          }
         });
      },
    }
   } 
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
.box {
  .pic {
    text-align: center;
  }
  .to_things {
    margin-left: 20rpx;
    padding-top: 20rpx;
    .name {
      display: flex;
      margin-left: 30rpx;
      font-size: 30rpx;
    }
    .description {
      display: flex;
      margin-top: 20rpx;
      font-size: 30rpx;
    }
  }
  .swap_things {
    margin-left: 20rpx;
    padding-top: 20rpx;
    .name {
      display: flex;
      margin-left: 30rpx;
      font-size: 30rpx;
      height: 32rpx;
    }
    .description {
      display: flex;
      margin-top: 20rpx;
      font-size: 30rpx;
    }
  }
  .exchange_place {
    display: flex;
    margin: 20rpx 0 30rpx 20rpx;
    font-size: 30rpx;
    height: 32rpx;
  }
  .summit {
    display: flex;
    button {
      width: 40%;
      height: 80rpx;
      font-size: 32rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      background-color: #f1f1f1; 
    }
    button::after{
        border: none;
      }
      .changeButton {
        background-color: #0bdb0b;
        margin-top:20rpx;
        color: #fff;
      }
      .deleteButton {
        background-color: #f93333;
        margin-top:20rpx;
        color: #fff;
      }
  }
}

</style>
